<template>
  <div class="mod-schedule">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-select v-model="dataForm.eq_jobGroup" placeholder="执行器" @change="getJobList()" filterable>
          <el-option
            v-for="item in jobGroupList"
            :key="item.id"
            :label="item.appName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="dataForm.eq_jobId"
                   placeholder="任务" filterable>
          <el-option
            v-for="item in jobList"
            :key="item.id"
            :label="item.jobDesc"
            :value="item.id">
          </el-option>
        </el-select>
        <!--        <el-input v-model="dataForm.eq_jobId" placeholder="任务" clearable>-->

        <!--        </el-input>-->
      </el-form-item>

      <el-form-item>
        <el-select v-model="dataForm.logStatus" placeholder="状态" clearable>
          <el-option
            :key="'全部'"
            :label="'全部'"
            :value="0">
          </el-option>
          <el-option
            :key="'成功'"
            :label="'成功'"
            :value="1">
          </el-option>
          <el-option
            :key="'失败'"
            :label="'失败'"
            :value="2">
          </el-option>
          <el-option
            :key="'进行中'"
            :label="'进行中'"
            :value="3">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dataForm.ge_triggerTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dataForm.lt_triggerTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="结束时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="getDataList()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="content"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>

      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="80"
        label="任务ID">
      </el-table-column>
      <el-table-column
        prop="jobDesc"
        header-align="center"
        align="center"
        label="任务描述">
      </el-table-column>
      <el-table-column
        prop="triggerTime"
        header-align="center"
        align="center"
        label="调度时间">
      </el-table-column>
      <el-table-column
        prop="triggerCode"
        header-align="center"
        align="center"
        label="调度结果">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="调度备注">
        <template slot-scope="scope">
          <el-button v-if="scope.row.triggerMsg" type="text" size="small" @click="msgPop(scope.row.triggerMsg)">查看
          </el-button>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="executorAddress"
        header-align="center"
        align="center"
        label="执行节点">
      </el-table-column>
      <el-table-column
        prop="handleTime"
        header-align="center"
        align="center"
        label="执行时间">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="执行结果">
        <template slot-scope="scope">
          <span v-if="scope.row.handleCode == 200" style="color: green">成功</span>
          <span v-else-if="scope.row.handleCode == 500" style="color: red">失败</span>
          <span v-else-if="scope.row.handleCode == 502" style="color: red">失败(超时)</span>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="执行备注">
        <template slot-scope="scope">
          <el-button v-if="scope.row.handleMsg" type="text" size="small" @click="msgPop(scope.row.handleMsg)">查看
          </el-button>
          <span v-else>无</span>
        </template>

      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="logInfo(scope.row.id)">执行日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalElements"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <joblog-info v-if="logInfoVisible" ref="joblogInfo"></joblog-info>
  </div>
</template>

<script>

  import JoblogInfo from './joblog-info'


  export default {
    data() {
      return {
        dataForm: {
          eq_jobGroup: '',
          lt_triggerTime: '',
          ge_triggerTime: '',
          eq_jobId: this.$route.params.jobId ? this.$route.params.jobId : '',
          logStatus: ''
        },
        jobList: [],
        jobGroupList: [],
        content: [],
        page: 1,
        pageSize: 10,
        orderBy: '',
        totalPages: 0,
        totalElements: 0,
        dataListLoading: false,
        logInfoVisible: false
      }
    },
    components: {
      JoblogInfo
    },
    activated() {
      this.init()
    },
    methods: {
      init() {
        //获取jobGroupList
        this.$http({
          url: this.$http.adornUrl(`/framework/xxljob/jobgroup/list`),
          method: 'get'
        }).then(({data}) => {
          console.log(data)
          this.jobGroupList = data
        })

        this.getDataList()
      },
      //jobInfoList
      getJobList() {
        this.$http({
          url: this.$http.adornUrl(`/framework/xxljob/jobinfo/getJobsByGroup`),
          method: 'get',
          params: this.$http.adornParams({
            'jobGroup': this.dataForm.eq_jobGroup
          })
        }).then(({data}) => {
          console.log(data)
          this.jobList = data
        })
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/framework/xxljob/joblog/pageList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'pageSize': this.pageSize,
            'eq_jobId': this.dataForm.eq_jobId,
            'logStatus': this.dataForm.logStatus,
            'ge_triggerTime': this.dataForm.ge_triggerTime,
            'lt_triggerTime': this.dataForm.lt_triggerTime,
            'eq_jobGroup': this.dataForm.eq_jobGroup
          })
        }).then(({data}) => {
          if (data && data.status === 1) {
            this.content = data.content
            this.totalPages = data.totalPages
            this.totalElements = data.totalElements
          } else {
            this.content = []
            this.totalPages = 0
            this.totalElements = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.page = 1
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },

      // 打开消息
      msgPop(msg) {
        this.$message(msg)
      },

      // 日志详情
      logInfo(id) {
        this.logInfoVisible = true
        this.$nextTick(() => {
          this.$refs.joblogInfo.init(id)
        })
      },

      // 当前页
      currentChangeHandle(val) {
        this.page = val
        this.getDataList()
      }

    }
  }
</script>
